<template>
  <div class="outer-container-header">
    <div class="container-fluid long-container">
      <div class="container">
        <nav class="navbar navbar-default long-header">
          <div class="container-fluid long-nav">
            <!-- 手机端侧边展示导航 -->
            <div class="navbar-header">
              <!-- 页面加载时logo动画 -->
              <transition name="logo" appear class="animate__animated" enter-active-class="animate__backInDown">
                <router-link class="navbar-brand logo" to="/home">
                  <img src="../../assets/logo.png" alt="logo" />
                </router-link>
              </transition>
              <button type="button" class="navbar-toggle long-collapsed" @click="changeMobileList">
                <div :class="{'bar-hover':showMobileList,'bar-unhover':!showMobileList}">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </div>
              </button>
            </div>
            <!-- 导航栏 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right long-nav-font">
                <li>
                  <router-link active-class="long-liHover" to="/home">首页
                  </router-link>
                </li>
                <li>
                  <router-link active-class="long-liHover" to="/product">产品中心</router-link>
                </li>
                <li>
                  <router-link active-class="long-liHover" to="/news">新闻动态</router-link>
                </li>
                <li class="dropdown" @mouseleave="leaveList">
                  <router-link class="dropdown-toggle" :class="{'a-hover':showList, 'long-liHover':showAbout}"
                    active-class="long-liHover" @mouseenter="enterList" to="/about">
                    关于昨非
                  </router-link>
                  <transition name="dropDownList">
                    <ul class="dropdown drop-down-list" v-show="showList">
                      <li @click="goAbout('compile')">公司简介</li>
                      <li @click="goAbout('core')">核心价值观</li>
                      <li @click="goHistory">发展历程</li>
                    </ul>
                  </transition>
                </li>
                <li>
                  <router-link active-class="long-liHover" to="/contact">联系我们</router-link>
                </li>
              </ul>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>
      </div>
    </div>
  </div>
  <!-- 移动端导航 -->
  <transition name="mobileNav">
    <div class="mobile-nav" v-show="showMobileList">
      <ul>
        <li>
          <router-link to="/home" active-class="mobile-nav-hover" @click="navRouterJump">首页</router-link>
        </li>
        <li>
          <router-link to="/product" active-class="mobile-nav-hover" @click="navRouterJump">产品中心
          </router-link>
        </li>
        <li>
          <router-link to="/news" active-class="mobile-nav-hover" @click="navRouterJump">新闻动态</router-link>
        </li>
        <li>
          <el-collapse>
            <el-collapse-item title="关于昨非">
              <ul class="inside-nav">
                <li>
                  <router-link to="/about" :class="{'mobile-nav-hover':showCompile}" @click="navRouterJump('compile')">
                    -- 公司简介
                  </router-link>
                </li>
                <li>
                  <router-link to="/about" :class="{'mobile-nav-hover':showCore}" @click="navRouterJump('core')">--
                    核心价值观
                  </router-link>
                </li>
                <li>
                  <router-link to="/history" :class="{'mobile-nav-hover':showHistory}"
                    @click="navRouterJump('history')">-- 发展历程</router-link>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </li>
        <li>
          <router-link to="/contact" active-class="mobile-nav-hover" @click="navRouterJump">联系我们</router-link>
        </li>
      </ul>
    </div>
  </transition>

</template>

<script>
  import "animate.css";
  import { ref, onMounted, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  export default {
    name: "Header",
    setup() {
      const router = useRouter()
      const route = useRoute()

      let showList = ref(false)  //是否显示pc端关于昨非的下拉列表
      let showMobileList = ref(false) //移动端导航
      let showCompile = ref(false) //移动端导航中 公司简介 导航是否高亮
      let showCore = ref(false) //移动端导航中 核心价值观 导航是否高亮
      let showHistory = ref(false)  //移动端导航中 发展历程 导航是否高亮
      let showAbout = computed(() => {
        if (route.path == '/history') {
          return true
        } else {
          return false
        }
      })  //当前路径为发展历程时，about导航是否高亮
      //事件
      //鼠标移入展示下拉列表
      function enterList() {
        showList.value = true
      }
      //鼠标移出收起下拉列表
      function leaveList() {
        showList.value = false
      }

      //点击按钮切换导航显示状态
      function changeMobileList() {
        showMobileList.value = !showMobileList.value
      }

      //点击移动端导航跳转路由并隐藏导航
      function navRouterJump(title) {
        //判断是否点击了对应的导航
        if (title == 'compile' || title == 'core') {
          goAbout(title) //调用跳转指定位置的函数
        }

        if (title == 'compile') {
          //当点击 移动端的 公司简介 导航时
          showCompile.value = true //移动端导航中 公司简介 导航高亮
          showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
          showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
        } else if (title == 'core') {
          //当点击 移动端的 核心价值观 导航时
          showCore.value = true  //移动端导航中 核心价值观 导航高亮
          showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
          showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
        }
        else if (title == 'history') {
          //当点击 移动端的 核心价值观 导航时
          showHistory.value = true  //移动端导航中 发展历程 导航高亮
          showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
          showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
        } else {
          showCompile.value = false  //重置移动端导航中 公司简介 导航显示状态
          showCore.value = false  //重置移动端导航中 核心价值观 导航显示状态
          showHistory.value = false  //重置移动端导航中 发展历程 导航显示状态
        }

        showMobileList.value = false  //收起导航
      }

      //跳转到指定页面页面/并滚动到指定位置
      function goAbout(title) {
        //跳转到about页面
        router.push({
          path: "/about"
        })
        //将该函数包裹一个定时器确保可以获取跳转页面后的指定位置的id
        setTimeout(() => {
          if (title == 'compile') {
            var goContent = document.getElementById('compileContent')
          } else if (title == 'core') {
            var goContent = document.getElementById('coreContent')
          }
          goContent.scrollIntoView({
            behavior: 'smooth',//平滑滚动
            block: 'center', //将指定位置滚动到页面中间
          })
        }, 100)

      }

      //跳转发展历程页面
      function goHistory() {
        router.push({
          path: "/history"
        })
      }
      return {
        showList,
        showMobileList,
        showCompile,
        showCore,
        showHistory,
        showAbout,
        enterList,
        leaveList,
        changeMobileList,
        navRouterJump,
        goAbout,
        goHistory
      }
    }
  };
</script>

<style>
  .outer-container-header {
    height: 96px;
  }

  .outer-container-header .long-container {
    position: fixed;
    z-index: 999;
    width: 100%;
    border-top: 8px solid #7689BE;
    height: 96px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .outer-container-header .long-collapsed {
    margin-top: 11px;
    border: 1px solid #fff;
    height: 50px;
    width: 55px;
  }

  .outer-container-header .long-collapsed:hover {
    background-color: #fff;
  }

  .outer-container-header .long-collapsed:focus {
    background-color: #fff;
  }

  .outer-container-header .long-collapsed .icon-bar {
    width: 100%;
    height: 2px;
    margin-top: 8px;
  }

  .outer-container-header .long-collapsed .bar-hover {
    transform: rotate(90deg);
    transition: transform 0.4s ease;
  }

  .outer-container-header .long-collapsed .bar-unhover {
    transform: rotate(0deg);
    transition: transform 0.5s ease;
  }

  .outer-container-header .long-header {
    border: 1px solid #fff;

  }

  .outer-container-header .long-header .long-nav {
    background-color: #ffffff;
  }

  .outer-container-header .long-header .long-nav img {
    width: 160px;
    margin-top: 12px;
  }

  .outer-container-header .long-header .long-nav .long-nav-font {
    background-color: #ffffff;
  }

  .outer-container-header .long-header .long-nav .long-nav-font a {
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    margin: 0 5px;
    line-height: 50px;
    height: 86px;
    transition: all 0.5s ease;
  }

  .outer-container-header .long-header .long-nav .long-nav-font a:hover {
    color: #fff;
    font-weight: 500;
    background-color: #4F68AC;
  }

  .outer-container-header .long-header .long-nav .long-nav-font .a-hover {
    color: #fff;
    font-weight: 500;
    background-color: #4F68AC;
  }

  .outer-container-header .container .navbar .long-nav .collapse .long-liHover {
    position: relative;
    height: 86px;
    color: #ffffff;
    background-color: #4F68AC;
    font-weight: 500;
  }

  .outer-container-header .in {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
  }

  /* 修改bootstrap 下拉菜单触发方式  (点击) => (鼠标移入)   ---start*/
  .outer-container-header .dropdown:hover>.dropdown-menu {
    display: block;
  }

  .outer-container-header .drop-down-list {
    position: absolute;
    top: 86px;
    left: 5px;
    width: 200px;
    height: 164px;
    background-color: #4F68AC;
    padding: 0 15px;
    padding-top: 12px;
    overflow: hidden;
  }

  .outer-container-header .dropDownList-enter-active {
    animation: list-enter-background 0.3s steps(60, start) alternate forwards;
    animation-timing-function: ease-in;
  }

  .outer-container-header .dropDownList-leave-active {
    animation: list-enter-background 0.3s steps(60, start) reverse;
    animation-timing-function: ease-in;
  }

  @keyframes list-enter-background {
    0% {
      height: 0;
      padding-top: 0px;
    }

    100% {
      height: 170px;
      padding-top: 12px;
    }
  }



  .drop-down-list li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-family: "Source Han Sans CN";
    margin-bottom: 10px;
    cursor: pointer;
    animation: list-enter-text 0.4s steps(60, start) alternate forwards;
    user-select: none;
  }

  .drop-down-list li:hover {
    background-color: #fff;
    color: #666666;
    transition: all 0.3s ease;
  }

  /* 移动端导航样式 */
  .mobile-nav {
    border-top: 1px solid #eee;
    position: fixed;
    z-index: 1000;
    top: 96px;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
    padding: 40px 40px 0px 40px;
    overflow: hidden;
  }

  /* 移动端导航动画 */
  .mobileNav-enter-active {
    animation: mobileNav 0.4s steps(60, start) alternate forwards;
    animation-timing-function: ease-out;
  }

  .mobileNav-leave-active {
    animation: mobileNav 0.4s steps(60, start) reverse;
    animation-timing-function: ease-out;
  }

  @keyframes mobileNav {
    0% {
      transform: translateX(100vw);
    }

    100% {
      transform: translateX(0px);
    }
  }

  .mobile-nav li {
    font-family: "Source Han Sans CN";
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #eeeeee;
  }

  .mobile-nav li a {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #303133;
    text-decoration: none;
  }

  .mobile-nav-hover {
    color: #4F68AC !important;
  }

  .el-collapse-item__header {
    font-size: 14px;
    height: 60px;
  }

  .mobile-nav .inside-nav {
    padding-left: 20px;
  }

  .mobile-nav .inside-nav li {
    border-bottom: 0;
  }

  .mobile-nav .inside-nav li a {
    height: 50px;
    color: #666666;
    font-weight: 400;
  }

  .mobile-nav .inside-nav li a:hover {
    color: #4F68AC;
  }

  /* 设置响应式 */
  /* 移动端 */
  @media (max-width: 768px) {
    .long-header .long-nav .long-nav-font a {
      line-height: 25px;
      height: 50px;
    }

    .container .navbar .long-nav .collapse .long-liHover {
      height: 50px;
    }

    .drop-down-list {
      width: 100%;
      padding-top: 0;
    }
  }
</style>